<template>
  <div>
    <h3>子组件 -- {{ count }}</h3>
    <button @click="addCount">+++count+++</button>
  </div>
</template>

<script>
export default {
  props: ['count'],
  // emits配置可以提前声明好你要自定义的事件名称，这样在下面使用时就会有提示，起到一定的约束，可选
  emits: ['setCount'],
  // 参数1：props对象，不能解构，还有必须要有props配置，才能在参数1中接受到props数据
  // 参数2：context对象 emit、slots、expose、attrs
  setup(props, { emit, attrs }) {
    // 获取props中的数据，只会执行1次
    // console.log(props.count)
    // props配置中没有定义的属性都会在attrs对象中接受
    // attrs它也是响应式的，也不能解构
    console.log(attrs)

    const addCount = () => {
      emit('setCount', 1)
    }

    return {
      addCount
    }
  }
}
</script>

<style lang="scss" scoped></style>
